﻿<!DOCTYPE html>
<html class="x-admin-sm">
<head>
    <meta charset="UTF-8" />
    <title>单个流程数据分析</title>
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />

    <link href="../Portal2020/css/font.css" rel="stylesheet" />
    <link href="../Portal2020/css/xadmin.css" rel="stylesheet" />


    <script type="text/javascript" src="../../Scripts/bootstrap/js/jquery.min.js"></script>
    <script src="../../Scripts/QueryString.js" type="text/javascript"></script>
    <script type="text/javascript" src="../../Scripts/config.js"></script>
    <script type="text/javascript" src="../../Comm/Gener.js"></script>

    <script src="../../Portal2020/lib/layui/layui.js" charset="utf-8"></script>
    <script src="../../Scripts/echartsjs/echarts.min.js"></script>
    <script>
        $(function () {
            var FlowName = null;
            var FK_flowNo = GetQueryString("FK_Flow");
            var ens = new Entities("BP.WF.GenerWorkFlows", "FK_Flow", FK_flowNo);
            for (var i = 0; i < ens.length; i++) {
                 //通过json访问属性.
                var jsonEn = ens[i];
                
                var en = new Entity("BP.WF.GenerWorkFlow", jsonEn);
                FlowName = en.FlowName;
                break;
            }
            $("#flowName").html("<h2 style='margin-left:15px;'>流程名称："+FlowName+"</h2>");
            
        });
    </script>
    <style>
        h2{
            
        }
    </style>
</head>
<body>
    <div id="Msg"></div>
    <h3 id="flowName"></h3>
    <div class="layui-fluid">

        <div class="layui-col-md12">
            <div class="layui-card">

                <div class="layui-card-body ">
                    <ul class="layui-row layui-col-space10 layui-this x-admin-carousel x-admin-backlog">

                        <li class="layui-col-md2 layui-col-xs2">
                            <a href="javascript:;" class="x-admin-backlog-body">
                                <h3>实例总数</h3>
                                <p>
                                    <cite id="FlowInstaceNum">0</cite>
                                </p>
                            </a>
                        </li>
                        <li class="layui-col-md2 layui-col-xs2">
                            <a href="javascript:;" class="x-admin-backlog-body">
                                <h3>运行中</h3>
                                <p>
                                    <cite id="RunNum">0</cite>
                                </p>
                            </a>
                        </li>
                        <li class="layui-col-md2 layui-col-xs2">
                            <a href="javascript:;" class="x-admin-backlog-body">
                                <h3>待办数</h3>
                                <p>
                                    <cite id="TodolistNum">0</cite>
                                </p>
                            </a>
                        </li>
                        <li class="layui-col-md2 layui-col-xs2">
                            <a href="javascript:;" class="x-admin-backlog-body">
                                <h3>逾期数</h3>
                                <p>
                                    <cite id="OverTimeNum">0</cite>
                                </p>
                            </a>
                        </li>
                        <li class="layui-col-md2 layui-col-xs2">
                            <a href="javascript:;" class="x-admin-backlog-body">
                                <h3>退回数</h3>
                                <p>
                                    <cite id="ReturnNum">0</cite>
                                </p>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>


        <div class="layui-row layui-col-space15">

            <div class="layui-col-sm12 layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">流程发起数-月份</div>
                    <div class="layui-card-body" style="min-height: 280px;">
                        <div id="FlowsByNY" class="layui-col-sm12" style="height: 300px;"></div>

                    </div>
                </div>
            </div>
            <div class="layui-col-sm12 layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">流程发起数-部门</div>
                    <div class="layui-card-body" style="min-height: 280px;">
                        <div id="FlowsByDept" class="layui-col-sm12" style="height: 300px;"></div>

                    </div>
                </div>
            </div>
            <div class="layui-col-sm12 layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">待办数-部门</div>
                    <div class="layui-card-body" style="min-height: 280px;">
                        <div id="TodolistByDept" class="layui-col-sm12" style="height: 300px;"></div>

                    </div>
                </div>
            </div>

            <div class="layui-col-sm12 layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">逾期数-人员</div>
                    <div class="layui-card-body" style="min-height: 280px;">
                        <div id="OverTimeByEmp" class="layui-col-sm12" style="height: 300px;"></div>

                    </div>
                </div>
            </div>
            <div class="layui-col-sm12 layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">逾期数-部门</div>
                    <div class="layui-card-body" style="min-height: 280px;">
                        <div id="OverTimeByDept" class="layui-col-sm12" style="height: 300px;"></div>

                    </div>
                </div>
            </div>
            <div class="layui-col-sm12 layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">逾期数-节点</div>
                    <div class="layui-card-body" style="min-height: 280px;">
                        <div id="OverTimeByNode" class="layui-col-sm12" style="height: 300px;"></div>

                    </div>
                </div>
            </div>
        </div>

    </div>


    <script type="text/javascript">
        //页面启动函数.
        $(function () {
            var FK_Flow = GetQueryString("FK_FLOW");
            var FlowsByNY_X = new Array();
            var FlowsByNY_Y = new Array();
            var FlowsByDept_X = new Array();
            var FlowsByDept_Y = new Array();
            var TodolistByDept_X = new Array();
            var TodolistByDept_Y = new Array();
            var OverTimeByEmp_X = new Array();
            var OverTimeByEmp_Y = new Array();
            var OverTimeByDept_X = new Array();
            var OverTimeByDept_Y = new Array();
            var OverTimeByNode_X = new Array();
            var OverTimeByNode_Y = new Array();

            $("#Msg").html("<img src=../../Img/loading.gif />&nbsp;正在加载,请稍后......");

            //获得数数量，并把数量绑定.
            var handler = new HttpHandler("BP.WF.HttpHandler.WF_Admin_AttrFlow");
            handler.AddPara('FK_Flow', FK_Flow);
            var data = handler.DoMethodReturnJSON("GraphicalAnalysis_Init");
            GenerFullAllDivVal(data);

            //绑定- 流程发起数
            data = handler.DoMethodReturnJSON("GraphicalAnalysis_DataSet");

            //流程发起-按月份.
            var FlowsByNYs = data.FlowsByNY;
            $.each(FlowsByNYs, function (i, FlowsByNY) {
                FlowsByNY_X[i] = FlowsByNY.FK_NY;
                FlowsByNY_Y[i] = FlowsByNY.Num;
            })
            queryChart_FlowsByNY(FlowsByNY_X, FlowsByNY_Y);

            //流程发起-按部门.
            var FlowsByDepts = data.FlowsByDept;
            $.each(FlowsByDepts, function (i, FlowsByDept) {
                FlowsByDept_X[i] = FlowsByDept.DeptName;
                FlowsByDept_Y[i] = FlowsByDept.Num;
            })
            queryChart_FlowsByDept(FlowsByDept_X, FlowsByDept_Y);

            //待办-按部门.
            var TodolistByDepts = data.TodolistByDept;
            $.each(TodolistByDepts, function (i, TodolistByDept) {
                TodolistByDept_X[i] = TodolistByDept.DeptName;
                TodolistByDept_Y[i] = TodolistByDept.Num;
            })
            queryChart_TodolistByDept(TodolistByDept_X, TodolistByDept_Y);

            //逾期-按人员.
            var OverTimeByEmps = data.OverTimeByEmp;
            $.each(OverTimeByEmps, function (i, OverTimeByEmp) {
                OverTimeByEmp_X[i] = OverTimeByEmp.name;
                OverTimeByEmp_Y[i] = OverTimeByEmp.Num;
            })
            queryChart_OverTimeByEmp(OverTimeByEmp_X, OverTimeByEmp_Y);
            //逾期-按部门.
            var OverTimeByDepts = data.OverTimeByDept;
            $.each(OverTimeByDepts, function (i, OverTimeByDept) {
                OverTimeByDept_X[i] = OverTimeByDept.DeptName;
                OverTimeByDept_Y[i] = OverTimeByDept.Num;
            })
            queryChart_OverTimeByDept(OverTimeByDept_X, OverTimeByDept_Y);
            //逾期-按节点.
            var OverTimeByDepts = data.OverTimeByNode;
            $.each(OverTimeByDepts, function (i, OverTimeByNode) {
                OverTimeByNode_X[i] = OverTimeByNode.NodeName;
                OverTimeByNode_Y[i] = OverTimeByNode.Num;
            })
            queryChart_OverTimeByNode(OverTimeByNode_X, OverTimeByNode_Y);

            $("#Msg").html("");
        });


        //流程发起-按月份.
        function queryChart_FlowsByNY(FlowsByNY_X, FlowsByNY_Y) {

            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('FlowsByNY'));

            // 指定图表的配置项和数据
            var option = {
                grid: {
                    top: '5%',
                    right: '1%',
                    left: '1%',
                    bottom: '10%',
                    containLabel: true
                },
                tooltip: {
                    trigger: 'axis'
                },
                xAxis: {
                    type: 'category',
                    data: FlowsByNY_X
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    name: '流程数',
                    data: FlowsByNY_Y,
                    type: 'line',
                    smooth: true
                }]
            };


            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }
        //流程发起-按部门.
        function queryChart_FlowsByDept(FlowsByDept_X, FlowsByDept_Y) {

            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('FlowsByDept'));

            // 指定图表的配置项和数据
            var option = {
                grid: {
                    top: '5%',
                    right: '1%',
                    left: '1%',
                    bottom: '10%',
                    containLabel: true
                },
                tooltip: {
                    trigger: 'axis'
                },
                xAxis: {
                    type: 'category',
                    data: FlowsByDept_X
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    name: '流程数',
                    data: FlowsByDept_Y,
                    type: 'bar',
                    smooth: true
                }]
            };


            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }
        //待办-按部门.
        function queryChart_TodolistByDept(TodolistByDept_X, TodolistByDept_Y) {

            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('TodolistByDept'));

            // 指定图表的配置项和数据
            var option = {
                grid: {
                    top: '5%',
                    right: '1%',
                    left: '1%',
                    bottom: '10%',
                    containLabel: true
                },
                tooltip: {
                    trigger: 'axis'
                },
                xAxis: {
                    type: 'category',
                    data: TodolistByDept_X
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    name: '待办数',
                    data: TodolistByDept_Y,
                    type: 'bar',
                    smooth: true
                }]
            };


            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }

        //逾期-按人员.
        function queryChart_OverTimeByEmp(OverTimeByEmp_X, OverTimeByEmp_Y) {

            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('OverTimeByEmp'));

            // 指定图表的配置项和数据
            var option = {
                grid: {
                    top: '5%',
                    right: '1%',
                    left: '1%',
                    bottom: '10%',
                    containLabel: true
                },
                tooltip: {
                    trigger: 'axis'
                },
                xAxis: {
                    type: 'category',
                    data: OverTimeByEmp_X
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    name: '流程数',
                    data: OverTimeByEmp_Y,
                    type: 'bar',
                    smooth: true
                }]
            };


            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }
        //逾期-按部门.
        function queryChart_OverTimeByDept(OverTimeByDept_X, OverTimeByDept_Y) {

            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('OverTimeByDept'));

            // 指定图表的配置项和数据
            var option = {
                grid: {
                    top: '5%',
                    right: '1%',
                    left: '1%',
                    bottom: '10%',
                    containLabel: true
                },
                tooltip: {
                    trigger: 'axis'
                },
                xAxis: {
                    type: 'category',
                    data: OverTimeByDept_X
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    name: '流程数',
                    data: OverTimeByDept_Y,
                    type: 'bar',
                    smooth: true
                }]
            };


            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }

        //逾期-按节点.
        function queryChart_OverTimeByNode(OverTimeByNode_X, OverTimeByNode_Y) {

            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('OverTimeByNode'));

            // 指定图表的配置项和数据
            var option = {
                grid: {
                    top: '5%',
                    right: '1%',
                    left: '1%',
                    bottom: '10%',
                    containLabel: true
                },
                tooltip: {
                    trigger: 'axis'
                },
                xAxis: {
                    type: 'category',
                    data: OverTimeByNode_X
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    name: '流程数',
                    data: OverTimeByNode_Y,
                    type: 'bar',
                    smooth: true
                }]
            };


            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }
    </script>

</body>
</html>